<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后勤提醒</title>
<script type="text/javascript">
	var rsset = new Array("00:50", "03:00", "12:00", "24:00", "00:15", "00:30",
			"01:00", "02:00", "00:40", "01:30", "04:00", "06:00", "00:20",
			"00:45", "01:30", "05:00", "01:00", "02:00", "06:00", "08:00",
			"00:30", "02:30", "04:00", "07:00", "02:00", "03:00", "05:00",
			"12:00", "02:30", "04:00", "05:30", "08:00", "01:00", "03:00",
			"06:00", "09:00", "00:30", "01:30", "04:30", "07:00", "00:40",
			"01:40", "05:20", "10:00", "04:00", "04:00", "08:00", "10:00");

	var remindCap = 3; //低于3分钟时提醒
	var sw = new Array(0, 0, 0, 0);
	var team = new Array(0, 0, 0, 0);
	var during = new Array(0, 0, 0, 0);
	onload = function() {
		Notification.requestPermission().then(function(permission) {
			if (permission === 'granted') {
				console.log('用户允许通知');
			} else if (permission === 'denied') {
				console.log('用户拒绝通知');
			}
		});

		t0.focus();
		setInterval(
				function() {

					for (var i = 0; i < 4; i++) {
						if (team[i] != 0) {
							if (during[i] < 0) {
								changeset(i, window["t" + i]);
								sw[i] = 0;
							}
							during[i] = team[i] - new Date();
							if (during[i] <= 10 * 60 * 1000) {
								window["s" + (i + 1)].style.color = 'red';
							} else {
								window["s" + (i + 1)].style.color = '';
							}
							if (during[i] <= remindCap * 60 * 1000
									&& sw[i] == 0) {
								if (Notification.permission === 'granted') {
									var n = new Notification(
											'少女前线',
											{
												body : "后勤" + (i + 1) + "即将归来",
												tag : '少女前线',
												icon : 'https://img.moegirl.org/common/thumb/5/5b/Logo_Kalina_2.png/110px-Logo_Kalina_2.png',
												requireInteraction : true
											})
									setTimeout(function() {
										n.close();
									}, 5000);
								} else {
									alert("后勤" + (i + 1) + "即将归来");
								}
								a1.play();
								sw[i] = 1;
							}
						}
					}
					s1.innerHTML = (team[0] != 0) ? formatDuring(during[0])
							: "";
					s2.innerHTML = (team[1] != 0) ? formatDuring(during[1])
							: "";
					s3.innerHTML = (team[2] != 0) ? formatDuring(during[2])
							: "";
					s4.innerHTML = (team[3] != 0) ? formatDuring(during[3])
							: "";
				}, 500);

	}
	setService = function(last) {
		var h = parseInt(last.split(":")[0]);
		var m = parseInt(last.split(":")[1]);
		var date = new Date();
		date.setHours(date.getHours() + h);
		date.setMinutes(date.getMinutes() + m);
		return date;
	}
	formatDuring = function(mss) {
		var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
		var seconds = Math.floor((mss % (1000 * 60)) / 1000);

		hours = (hours < 10) ? ("0" + hours) : hours;
		minutes = (minutes < 10) ? ("0" + minutes) : minutes;
		seconds = (seconds < 10) ? ("0" + seconds) : seconds;

		return hours + ":" + minutes + ":" + seconds;

	}
	changeset = function(i, tar) {
		if (tar.value == "") {
			team[i] = 0;
		} else {
			var row = parseInt(tar.value.split("-")[0]);
			var col = parseInt(tar.value.split("-")[1]);
			team[i] = setService(rsset[row * 4 + col - 1]);
		}
	}
</script>
<style type="text/css">
input {
	width: 40px;
}
</style>
</head>
<body>
	<audio id="a1"
		src="http://mp32.9ku.com/upload/128/2019/03/20/888548.mp3"></audio>
	<div>
		后勤1：<span id="s1"></span>
		<input type="text" id="t0" onchange="changeset(0,this)"
			onkeypress="if (event.keyCode==13){t1.focus()}"
			onfocus="this.select();">
		<input type="button" value="-30s" onclick="team[0] -=30*1000;">
		<input type="button" value="+30s" onclick="team[0] -=-30*1000;">
		<input type="button" value="-10min" onclick="team[0] -=10*60*1000;">
		<input type="button" value="+10min" onclick="team[0] -=-10*60*1000;">
	</div>
	<div>
		后勤2：<span id="s2"></span>
		<input type="text" id="t1" onchange="changeset(1,this)"
			onkeypress="if (event.keyCode==13){t2.focus()}"
			onfocus="this.select();">
		<input type="button" value="-30s" onclick="team[1] -=30*1000;">
		<input type="button" value="+30s" onclick="team[1] -=-30*1000;">
		<input type="button" value="-10min" onclick="team[1] -=10*60*1000;">
		<input type="button" value="+10min" onclick="team[1] -=-10*60*1000;">
	</div>
	<div>
		后勤3：<span id="s3"></span>
		<input type="text" id="t2" onchange="changeset(2,this)"
			onkeypress="if (event.keyCode==13){t3.focus()}"
			onfocus="this.select();">
		<input type="button" value="-30s" onclick="team[2] -=30*1000;">
		<input type="button" value="+30s" onclick="team[2] -=-30*1000;">
				<input type="button" value="-10min" onclick="team[2] -=10*60*1000;">
		<input type="button" value="+10min" onclick="team[2] -=-10*60*1000;">
	</div>
	<div>
		后勤4：<span id="s4"></span>
		<input type="text" id="t3" onchange="changeset(3,this)"
			onkeypress="if (event.keyCode==13){t0.focus()}"
			onfocus="this.select();">
		<input type="button" value="-30s" onclick="team[3] -=30*1000;">
		<input type="button" value="+30s" onclick="team[3] -=-30*1000;">
				<input type="button" value="-10min" onclick="team[3] -=10*60*1000;">
		<input type="button" value="+10min" onclick="team[3] -=-10*60*1000;">
	</div>
	<div>后勤列表参考：<a href="http://118.24.16.192/logistics">Yuukia's GirlsFrontLine Tools</a></div>
</html>